<template>
	<div class="toJlis">
<div class="toj">
	<div class="lefts" v-for="(item,index) in arr" :key="index">
	<img :src="item.img" alt="">
	<span class="le">特价酒店</span>
	<div class="bot">
<p>{{ item.text }} </p>
<span>{{ item.text1 }}</span>
<span>{{ item.text2 }}</span>
<div class="last">{{ item.text3 }}</div>
	</div>
	</div>

	<div class="right">
		<div class="top" v-for="(item,index) in arrs" :key="index">
			<img :src="item.imgs" alt="">
	<div class="to">{{ item.tex }} </div>
	<div class="t2">
<p>{{ item.tex1 }}</p>
<span>{{ item.tex2 }}</span>
<span>{{ item.tex3 }}</span>
	</div>
		</div>

</div>
	</div>
	<div class="cai">
		<van-sticky :offset-top="0">
			<van-tabs>
				<van-tab title="推荐"></van-tab>
				<div class="qing">
					<van-tab title="电竞精选">
					</van-tab>
				</div>
				<van-tab title="影视享受"></van-tab>
				<van-tab title="网红打卡"></van-tab>
			</van-tabs>
		</van-sticky>
	</div>
	</div>
</template>

<script>
export default {
	data() { 
		return {
			arr: [
				{ img: "//img.alicdn.com/imgextra/i3/6000000006874/O1CN01Lx4SmL20eLBP5K8tX_!!6000000006874-0-hotel.jpg", text: "北京国汉鸿伟商务宾馆", text1: "￥107 起", text2: "￥143", text3:"新客专享福利"}
			],
			arrs: [
				{ imgs: "//img.alicdn.com/bao/uploaded/i1/1722373721/O1CN017ExLZF1dMGYeMB1qd_!!1722373721.png", tex: "特价·套餐 爆款超值囤", tex1: "【达人推荐】安吉吉兮远洲轩廷酒店1晚+观音堂双人滑雪体验", tex2:"￥499 起",tex3:"热销83件"},
				
				{ imgs: "https://gw.alicdn.com/imgextra/i3/O1CN01rW2R8O1dzCEjd0qgm_!!6000000003806-0-tps-351-176.jpg", tex: "好玩周末", tex2: "情人节住哪里", },
				
			],
			
		}
	}
}
</script>

<style scoped>
.toJlis{
	height: 4rem;
	padding: 0 .15rem 0 .15rem;
	margin-top: .28rem;
}
.toj{
	height: 4rem;
	background-color: white;
	border-radius: .2rem;
	display: flex;
	justify-content: space-between;
}
 .lefts{
		width: 3.5rem;
		border-radius: .2rem;
		border: 3px solid #ff4226;
		box-sizing: border-box;
}
.lefts img{
	height: 100%;
	width: 100%;
}
.le{
	display: block;
	border-radius: .2rem 0 .2rem 0 ;
width: 1.6rem;
height: .4rem;
background-color: #ff4226;
box-sizing: border-box;
color: white;
text-align: center;
position: relative;
top: -3.9rem;
left: -0.05rem;
}
.bot{
	height: 1.46rem;
	position: relative;
	top: -1.9rem;
	margin-left: .1rem;
}
.bot :nth-child(1){
	color: white;
	font-size: 14px;
}
.bot :nth-child(2){
	color: rgb(255, 4, 4);
	font-size: 14px;
}
.bot :nth-child(3){
	color: white;
	font-size: 14px;
	color: #d1d0cf;
	margin-left: .15rem;
}
.bot :nth-child(4){
	display: block;
	width: 2.2rem;
	height: .5rem;
	line-height: .6rem;
	padding-left: .2rem;
	box-sizing: border-box;
	border-radius: .3rem;
	color: white;
	margin-top: .15rem;
			/* background-image: url('https://gw.alicdn.com/imgextra/i2/O1CN01uEgXcH1bycRCANWYl_!!6000000003534-2-tps-29-28.png');
				background-size: .3rem ; */
	background-color:  #ff6944;
	font-size: 14px;
}
 .right{
	width: 3.5rem;
	border-radius: .2rem;
	box-sizing: border-box;
	display: flex;
	flex-wrap: wrap
}
.top{
	width: 3.5rem;
	height: 1.94rem;
	border-radius: .2rem;
}
.top img{
	width: 100%;
	height: 100%;
	border-radius: .2rem;
}
.to{
	width: 3.2rem;
	height: .4rem;
	color: white;
	padding-left: .3rem;
	line-height: .44rem;
	background-image: linear-gradient(to right, rgb(255, 170, 0), rgb(255, 128, 0));
	border-radius: .2rem 0 .2rem 0;
	position: relative;
		top: -1.95rem;
		box-sizing: border-box;
}
.t2{
	height: 1.22rem;
	position: relative;
	top: -1.65rem;
	margin-left: .2rem;
}
.t2 :nth-child(1){
	height: .72rem;
	display: block;
	color: white;
	width: 3rem;
	word-break: break-all;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}
.t2 :nth-child(2){
	color: red;
}
.t2 :nth-child(3){
		color: #d1d0cf;
		margin-left: .15rem;
}
.cai {
	width: 7.5rem;
	margin-left: -0.15rem;
	margin-top: .2rem;
	line-height: 1rem;
	border-bottom: 1px solid transparent;
	/* background-color: aquamarine; */
}

::v-deep .van-button {
	width: 7.5rem;
}

/* van-tab  */
::v-deep .van-tab--active {
	height: .6rem;
	border: 1px solid rgba(202, 200, 200, 0.384);
	border-radius: .6rem;
	background-color: rgba(255, 221, 0, 0.648);
	margin-left: .15rem;
}

::v-deep .van-tabs__line {
	display: none;
}

/*  van-tab--active  */
::v-deep .van-tab {
	margin-top: 5px;
	margin-bottom: 5px;
}
</style>